<template>
  <div class="fans">
    <div class="sticky left-0 right-0 top-0 z-9 h-full bg-hex-ffffff">
      <div class="relative">
        <image class="pointer-events-none absolute left-0 right-0 top-0 w-full"
               :src="`${cdnUrl}/imgs/detail/bg.png${imgVersion}`" mode="aspectFill" />
        <div class="z-999 ml-32rpx flex items-center pb-40rpx" :style="{ paddingTop: `${searchBarTop}px` }" @click.stop="goback">
          <uni-icons type="back" size="28" />
          <text class="text-36rpx font-600">返回</text>
        </div>
      </div>
    </div>
    <div v-if="fansList && fansList.length > 0">
      <div v-for="item in fansList"
           :key="item.userId"
           class="mx-32rpx flex items-center justify-between border-b-2rpx border-gray-100 border-b-solid py-32rpx"
           @click="navTo(`/pages-square/my?userId=${item.userId}`)">
        <div class="flex items-center">
          <image
            class="h-92rpx w-92rpx rounded-100%"
            :src="item.avatarUrl"
            mode="scaleToFill"
          />
          <div class="ml-16rpx flex flex-col justify-center">
            <div class="text-28rpx font-600 text-hex-333">{{ item.nickname }}</div>
            <div class="mt-5rpx text-24rpx text-hex-7C8699">
              <span>开始关注您了</span>
              <span class="ml-24rpx">{{ item.updatedAt?formatMsgTime(item.updatedAt):formatMsgTime(item.createdAt) }}</span>
            </div>
          </div>
        </div>
        <div class="box-border h-50rpx w-112rpx border-1 rounded-12rpx border-solid text-center text-24rpx leading-50rpx"
             :class="{
               'btn-theme-bg': item.isAttention === 0,
               'btn-normal-bg': item.isAttention === 1,
             }"
             @click.stop="handleClickAtt(item)">
          {{ item.isAttention === 0 ?'关注':'已关注' }}</div>
      </div>
    </div>
    <div v-else
         class="mt-200rpx flex items-center justify-center">
      <div>
        <image
          class="h-364rpx w-364rpx"
          :src="`${cdnUrl1}/imgs/xy/other/noneeattention.png${imgVersion}`"
          mode="scaleToFill"
        />
        <div class="text-center text-28rpx text-hex-7C8699">暂无关注</div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'


const { useGetInfoData } = useUserStore()
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
let userId = $ref('')
onLoad((options) => {
  if (options) {
    userId = options.userId
  }
})
let fansList: any = $ref([])
let pageNo = $ref(1)
const getFansList = async () => {
  const reqData = {
    method: 'get',
    data: {
      pageNo,
      pageSize: 10,
      userId,
    },
  }
  const { data, status, error } = await Fetch('/qqyapi/auth/user/userHomeAttentionPageList', reqData)
  fansList = fansList.concat(data?.result?.dataList)
}

const handleClickAtt = async (item) => {
  const reqData = {
    method: 'post',
    data: {
      'userId': item.userId,
    },
  }
  switch (item.isAttention) {
    case 0:
      await Fetch('/qqyapi/auth/attention/addAttention', reqData).then(res => {
        if (res.status === 200) {
          useGetInfoData()
          fansList.forEach((currItem) => {
            if (currItem.userId === item.userId) {
              currItem.isAttention = 1
              currItem.fansCount += 1
            }
          })
        }
      })
      break
    case 1:
      await Fetch('/qqyapi/auth/attention/cancelAttention', reqData).then(res => {
        if (res.status === 200) {
          useGetInfoData()
          fansList.forEach((currItem) => {
            if (currItem.userId === item.userId) {
              currItem.isAttention = 0
              currItem.fansCount -= 1
            }
          })
        }
      })
      break
  }

}
let searchBarTop: any = $ref('24')
let rightBar: any = $ref(0)
onLoad(() => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  rightBar = menuButtonInfo.width

  // #endif
})
//下滑加载更多数据
const getMoreData = () => {
  pageNo++
  getFansList()
}
onReachBottom(() => {
  getMoreData()
})
onMounted(() => {
  getFansList()
})
</script>

